<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>留言板</title>
    <link rel="icon" href="/images/logo.ico"/>
    <link rel="stylesheet" href="/lib/animate/animate.min.css"/>
    <link rel="stylesheet" href="/css/me.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <link rel="stylesheet" href="/lib/editormd/css/editormd.preview.css"/>
    <link rel="stylesheet" href="/lib/typo/typo.css"/>
    <link rel="stylesheet" href="/lib/prism/prism.css"/>
    <link rel="stylesheet" href="/lib/semantic/semantic.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"  media="none" onload="this.media='all'">
</head>
<body class="m-back-img5">
<!--导航-->
<nav class="animated fadeInDown m-back-grass m-fixed-w">
    <div class="ui container">
        <div class="ui inverted secondary stackable  menu">  <!--stackable 可堆叠的 应用在移动端-->
            <h2 class="ui white header item"><a href="/">个人博客</a></h2>
            <a href="/" class="nav_item item m-mobile-hide"><i
                        class="home icon"></i>首页</a>
            <a href="/p/types.html" class="nav_item item m-mobile-hide"
            ><i class="idea icon"></i>分类</a>
            <a href="/p/tags.html" class="nav_item item m-mobile-hide">
                <i class="tags icon"></i>标签</a>
            <a href="/p/archives.html" class="nav_item item m-mobile-hide"><i class="clone icon"></i>归档</a>
            <a href="/p/guestbook.html" class="nav_item item m-mobile-hide">
                <i class="comments outline icon"></i>留言板</a>
            <!-- <a href="/p/about.html" class="nav_item item m-mobile-hide"><i
                        class="info icon"></i>关于我</a> -->
            <div class=" m-mobile-hide m-search">
                <i class="search line icon funIcon"></i>
                <i class="close line icon funIcon no "></i>
                <form content="m-mobile-show" action="#" th:action="@{/search}" name="search">
                    <div class="m-form">
                        <input type="text" name="query" placeholder="快来找你要的东东ヾ(≧▽≦*)o" required="required">
                        <i onclick="document.forms['search'].submit()" class="search link icon s-icon"></i>
                    </div>
                </form>
            </div>
            <div class="nav_search right item no">
                <form name="search" action="#" th:action="@{/search}" method="post" target="_blank">
                    <div class="ui icon inverted transparent input m-margin-tb-tiny">
                        <input id="query" type="text" name="query" placeholder="Search....">
                        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <span id="menu_toggle" class="ui black button m-mobile-show m-top-right ">
        <i class="sidebar icon"></i>
    </span>
</nav>
<!--top attached 完整拼接成一个相连区域 bottom attached-->

<div class="m-padded-top-best" style="opacity: 0.9;">
    <div class=" ui container">
        <!--中间内容-->
        <div id="waypoint" class="ui eleven wide column m-container animated fadeIn stickyed">
            <div class="ui container">
                <div class="ui  padded segment">
                    <input id="blogInfo-user-email" type="hidden">
                    <!--   内容-->
                    <div class="ui  aligned basic segment">
                    </div>
                    <h2 class="ui center aligned header">留言板</h2>
                    <div id="editormd-view"
                         class="typo typo-selection m-padded-lr-responsive m-padded-tb-2em ">
            <textarea id="content" style="display:none;">
                    # MY BABY
                    ### 文章内容
                </textarea>
                    </div>

                    <!--赞赏-->
                    <!-- segment 加个basic就把边线去掉了  circular大圆角-->
                    <div class="ui center aligned basic segment" >
                        <button id="payButton" class="ui orange basic circular button">赞赏</button>
                    </div>
                    <div class="ui payQR flowing popup transition hidden">
                        <div class="ui orange basic label">
                            <div class="ui medium images">
                                <div class="ui images ">
                                    <div class="image ">
                                        <img class="ui rounded bordered image" src="/images/pay/img_1.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ui bottom  segment m-font-size">
                    <!--            留言区-->
                    <div id="comment-form" class="ui form">
                        <input type="hidden" name="blog.id">
                        <input type="hidden" name="parentComment.id" value="">
                        <input type="hidden" name="parentComment.email" value="">
                        <input type="hidden" name="login" value="false">
                        <div class="field">
                    <textarea name="content"
                              placeholder="评论千万条，友善第一条"></textarea>
                        </div>
                        <div class="fields">
                            <div class="field m-mobile-wide m-margin-bottom-small">
                                <div class="ui left icon input">
                                    <img id="avatar" src="/images/avatar/2.png" class="ui mini circular image"
                                         style="margin: 5px 0px;">
                                </div>
                            </div>
                            <div id="div-QQ" class="field m-mobile-wide m-margin-bottom-small">
                                <div class="ui left icon input">
                                    <i class="qq icon"></i>
                                    <input id="QQ" type="text" name="qq"
                                           placeholder="输入qq号自动获取昵称头像">
                                </div>
                            </div>
                            <div class="field m-mobile-wide m-margin-bottom-small">
                                <div class="ui left icon input">
                                    <i class="user icon"></i>
                                    <input type="text" name="nickname"
                                           placeholder="昵称(必填)">
                                </div>
                            </div>
                            <div class="field m-mobile-wide m-margin-bottom-small">
                                <div class="ui left icon input">
                                    <i class="mail icon"></i>
                                    <input type="text" name="email" placeholder="邮箱(将保密)">
                                </div>
                            </div>
                            <div class="field m-mobile-wide m-margin-bottom-small">
                                <button id="commentpost-btn" class="ui blue button m-mobile-wide"><i
                                            class="edit icon"></i>发布
                                </button>
                            </div>
                        </div>

                        <div class="ui error message">
                            <div class="header">输入错误</div>
                            <p>你只能用指定的邮箱注册</p>
                        </div>

                    </div>
                    <!--            留言区-->
                    <div id="comment-container" class="ui teal segment">
                        <div>
                            <div class="ui threaded comments" style="max-width: 100%;">
                                <h3 id="comment-before" class="ui dividing header">评论</h3>
                                <!--            留言内容-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="toolbar" class="m-fixed m-bottom-right m-padded " style="display: none">
    <div class="ui vertical icon buttons ">
        <button id="to_comment" class="ui teal button">留言</button>
        <button id="toTop_but" class="ui icon button"><i class="chevron up icon "></i></button>
    </div>
</div>

<div id="toc-container" class="ui flowing popup transition hidden" style="width: 250px;">
    <ol class="js-toc" style="z-index: 0!important;"></ol>
</div>

<div id="wechat-qr" class="ui  flowing popup transition hidden " style="width: 130px!important;">

</div>


<!--底部footer-->
<footer id="" class="ui inverted vertical segment m-padded-tb-massive m-padded-top">
    <!--    居中-->
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="/images/weixin.png" class="ui rounded image"
                             alt="" width="110px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">推荐博客</h4>
                <div id="recommends" class="ui inverted link list m-text-thin m-text-spaced">
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">联系我</h4>
                <div class="ui inverted link list m-text-thin m-text-spaced">
                    <a href="#" class="item">Email：123456@qq.com</a>
                    <a href="#" class="item">QQ:123456789</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">Blog</h4>
                <p class="m-text-thin m-text-spaced m-opacity">
                    这厮我的个人博客，会分享关于编程，思考，随笔相关的内容，欢迎大家访问，希望可以给到这的人有所帮助...
                </p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
    </div>

    <div class="ui center aligned container m-font-size">本站😉已运行✌[<span id="span_dt_dt"></span> ]
    </div>
    <!--    居中-->
    <div class="ui center aligned container m-padded-tb-small">
        <p class="m-text-thin m-text-spaced" style="color: whitesmoke">Copyright © 2021-2022  , All rights reserved.
        </p>
        <div>
            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode="
               style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img
                    src="https://beian.mps.gov.cn/favicon.ico" style="float:left;">
                <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#ff1c04;">京ICP备
                    XXXXXXXXXX号</p></a>
        </div>
    </div>
    <div class="back-enter">
        <a href="/back/index.html" title="看看后门"><i class="sign in alternate icon"></i></a>
    </div>
    <meting-js
            server="netease"
            type="playlist"
            id="6859965088"
            mini="true"
            artist="rainymood"
            fixed="true">
    </meting-js>
</footer>
</body>
<script type="text/javascript">
    window.Prism = window.Prism || {};
    window.Prism.manual = true;
</script>
<!-- jquery -->
<script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery.cookie.js"></script>
<!-- semantic-ui-->
<script type="text/javascript" src="/lib/semantic/semantic.min.js"></script>
<!--editormd-->
<script src="/lib/editormd/lib/prettify.min.js"></script>
<script src="/lib/editormd/lib/raphael.min.js"></script>
<script src="/lib/editormd/lib/underscore.min.js"></script>
<script src="/lib/editormd/lib/sequence-diagram.min.js"></script>
<script src="/lib/editormd/lib/flowchart.min.js"></script>
<script src="/lib/editormd/lib/jquery.flowchart.min.js"></script>
<script src="/lib/editormd/lib/marked.min.js"></script>
<!-- layer -->
<script type="text/javascript" src="/lib/layer/layer.js"></script>
<script type="text/javascript" src="/lib/editormd/editormd.min.js"></script>

<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>-->

<script type="text/javascript" src="/lib/prism/prism.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/showTime.js"></script>
<script type="text/javascript" src="/js/comment.js"></script>
<!-- require APlayer -->
<script async="async" type="text/javascript" src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script async="async" type="text/javascript" src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<script type="text/javascript">

    $(function () {
        browser();
        init();
    });
    $("#payButton").popup({
        popup: $(".payQR.popup"),
        on: 'click',
        position: 'bottom center'
    });

    $("#toTop_but").click(function () {
        $(window).scrollTo(0, 300);
    });
    $("#to_comment").click(function () {
        $(window).scrollTo(document.getElementById('comment-form'));
    });

    function init() {
        let Bid = '1011FB95-E06D-426E-BA74-D1BDEBABDC2A';
        show_date_time();
        $("[name='blog.id']").val(Bid);
        getBlogByUrlId(Bid);
    };

    function getBlogByUrlId(id) {
        $.ajax({
            url: "/blogs/" + id,
            type: "GET",
            success: function (result) {
                layer.closeAll();
                if (result.code === 200) {
                    setBlog(result.data);
                    Prism.highlightAll(false)
                    if(result.data.commentable){
                        getComment($.cookie('userTicket'));
                    }else {
                        $("#comment-form").remove();
                        $("#comment-container").remove();
                    }
                } else {
                    layer.msg(result.msg);
                }

            },
            error: function (obj) {
                layer.closeAll();
                layer.log("error，也许您的网络有问题");
            }
        });
    };
    function setBlog(obj) {
        $("#blog-title").text(obj.title);
        $("#content").text(obj.content);
        $("[name='blog.id']").val(obj.id);

        editormd.markdownToHTML("editormd-view", {
            htmlDecode: "style,script,iframe",
            tocm: true,
            tocContainer: "#custom-toc-container",
            emoji: true,
            taskList: true,
            // codeFold : true,
            previewCodeHighlight: false,// 关闭预览 HTML 的代码块高亮，默认开启
            tex: true, //默认不解析
            flowChart: true, //默认不解析
            sequenceDiagram: true //默认不解析
        });

        $("#blog-updateTime").text(obj.updateTime);

        $("#blogInfo-user-email").val(obj.user.email);

        let tagsText = '';
        $.each(obj.tags, function (index, val) {
            tagsText += '<div class="ui basic teal left pointing label"> '
                + val.name
                + '</div>';
        });
        $('#tags').html(tagsText);
        $('#blog-firstPicture').attr("src", obj.firstPicture);

        $('#blog-flag').text(obj.flag);
        if (!obj.shareStatement) {
            $("#blogInfo-shareText").addClass('no');
        }
        $("#blogInfo-updateTime").text(obj.createTime);
        $("#blogInfo-createTime").text(obj.updateTime);
    };

    //评论表单验证reply-form
    $('div[id$="form"]').form({
        fields: {
            title: {
                identifier: 'content',
                rules: [{
                    type: "empty",
                    prompt: "提示：请输入评论内容"
                }]

            },

            nickname: {
                identifier: 'nickname',
                rules: [{
                    type: "empty",
                    prompt: "提示：请输入你的昵称"
                }]
            },

            email: {
                identifier: 'email',
                rules: [{
                    type: "email",
                    prompt: "请填写正确的邮箱地址"
                }]
            }

        }
    });

    //#QQ失去焦点  取 #QQ值  请求返回josn ->  name=avatar  #nickname
    // 失去焦点
    $('#QQ').blur(function () {
        let QQ = $("#QQ").val();
        $.ajax({
            url: "https://api.usuuu.com/qq/" + QQ,
            type: "GET",
            dataType: "json",
            success: function (result) {
                if (result.code == 200) {
                    let data = result.data;
                    $("[name='nickname']").val(data.name);
                    $("[name='email']").val(data.qq + "@qq.com");
                    $("#avatar").attr('src', data.avatar);
                }
            }, error() {
                $("#avatar").attr('src', "/images/avatar/1.png");
            }
        });
    });

    function getQQ(e) {
        let QQ = $(e).val();
        $.ajax({
            url: "https://api.usuuu.com/qq/" + QQ,
            type: "GET",
            dataType: "json",
            success: function (result) {
                if (result.code === 200) {
                    let data = result.data;
                    //头像显示
                    $("#reply-avatar").attr("src", data.avatar);
                    $("[name='reply.nickname']").val(data.name);
                    $("[name='reply.email']").val(data.qq + "@qq.com");
                }
            }, error() {
                $("#reply-avatar").attr('src', "/images/avatar/1.png");
            }
        });
    };
</script>

</html>